<template>
  <div class="badgeWhite baseContent" :style="dataRend.style" v-loading="active">
    <basetitle>
      <slot slot="left">{{dataRend.name}}</slot>
      <slot slot="left">
        <el-radio-group class="yearRadio" @change="changeYear" v-model="tabPosition1">
          <el-radio-button :label="v" v-for="(v,i) in dataRend.years" :key="i"></el-radio-button>
        </el-radio-group>
      </slot>
      <slot slot="right">
        <div class="rightFontCont">
          <i class="iconfont icon-shuaxin1 rightFont" @click="refreshFull(dataRend.prn)"></i>
        </div>
      </slot>
    </basetitle>
    <div class="baseCont">
      <div class="chart-container overAuto" v-if="dataRend.itemData" :style="{ height: dataRend.height ? dataRend.height : defalutHeight }">
        <el-row>
          <el-col :span="18">
            <el-radio-group class="tabContRadio" @change="changeEcharts" v-model="tabPosition2">
              <el-radio-button :label="item.name" v-for="(item, index) in dataRend.tabCont" :key="index"></el-radio-button>
            </el-radio-group>
            <PaiLinecharts ref="pailine" :itemdata="dataRendData"></PaiLinecharts>
          </el-col>
          <el-col :span="6">
            <div class="overHideen chartContent" :style="{height:dataRend.itemData.height}">
              <ring-charts
                ref="ringChart"
                :showLegend="false"
                :centerData="dataRendData2.centerTextData+'%'"
                :centerText="dataRendData2.centerText"
                :ringGap="3"
                :ringSize="['45%','60%']"
                :showLable="true"
                :itemdata="dataRendData2"
                :colorList="colorList1"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  const basetitle =()=>import('@/components/basetitle/index.vue')//
 const RingCharts =()=>import('@/components/Charts/RingCharts.vue')//环形统计
 const PaiLinecharts =()=>import('@/components/Charts/PaiLinecharts.vue')//环形统计
  import {refreshContent} from "../../../api/config.js"
  import store from '../../../store'
  import { mapState, mapActions } from 'vuex'
  import { getFromCache } from '@/utils/cache.js';
  export default {
    name: 'BigScreamShow',
    props: {
      defalutHeight: {
        type: String,
        default: '300px'
      },
      itemdata: {
        default: Object
      }
    },
    components: {
      basetitle,
      RingCharts,
      PaiLinecharts
    },
    data() {
      return {
        dataRend:{},
        dataRendData:{
          month:[]
        },
        dataRendData2:{
          centerTextData:'',
          centerText:''
        },
        active:false,
        tabPosition1:'',
        tabPosition2:'',
        colorList1:['#94E4E4','#1A90FD','#2FC25B','#13C2C2','#98CBFF','#A4E3A5']
      };
    },
    computed: {
      ...mapState({
        mainRend:state => store.state.base.mainRend
      }),
    },
    beforeDestroy() {

    },
    mounted() {
      this.dataRend=this.itemdata;
      this.tabPosition2=this.dataRend.tabCont[0].name;
      this.changeEcharts(this.tabPosition2);
    },
    methods: {
      ...mapActions('base', ['getIndexRend']),
      refreshFull(type){
        let that=this;
        that.active=true;
        let parms={};
        parms.type=type;
        parms.user_prn = JSON.parse(getFromCache('userInfo')).env$user_prn;
        that.$post(refreshContent, parms).then(response => {
          setTimeout(function () {
            that.active=false;
          },2000);
          that.dataRend=response.obj
        })
      },
      changeEcharts(value){
        let tabIndex='';
        this.dataRend.tabCont.forEach(v=>{
          if(v.name===value){
            tabIndex=v.tabIndex;
          }
        });
        this.dataRend.itemData.list.forEach(v=>{
          if(v.year===this.tabPosition1){
            this.dataRendData={
              month:[]
            };
            this.dataRendData.month=v.month;
            this.dataRendData2={
              centerTextData:'',
              centerText:''
            };
            this.dataRendData.height=this.dataRend.itemData.height;
            v.tab.forEach(vv=>{
              if(vv.tabIndex===tabIndex){
                this.dataRendData.list=vv.list;
                this.dataRendData2=vv.ringData;
                setTimeout(()=>{
                  this.$refs.pailine.initChart();
                  this.$refs.ringChart.innt();
                })
              }
            })
          }
        })
      },
      changeYear(year){
        this.tabPosition1=year;
        this.changeEcharts(this.tabPosition2)
      }
    }
  };
</script>

<style lang="scss">
.yearRadio{
  margin-left: 20px;
  .el-radio-button__inner{
    font-size: 14px;
    color: #262626;
  }
}
  .tabContRadio{
    .el-radio-button__inner{
      font-size: 12px;
      color: #262626;
    }
    .el-radio-button.is-active .el-radio-button__inner{
      font-size: 14px;
    }
  }
</style>
